<template>
	<view>
		<CardMsg :item-id="detail.orderId" :src="detail.orderImage" :name="detail.orderName" :price="detail.price" number="数量:999份; 19年，高三" />
		<view class="change">
			<view class="changeTop-title">请选择售后类型</view>
			<radio-group @change="radioChange">
				<label v-for="(item,index) in radioList" :key="index">
					<radio color="#E6B873" :value="item.value" /><text>{{item.name}}</text>
				</label>
			</radio-group>
		</view>
		<view class="infoItem" @tap="isShow =! isShow">
			<view>选择申请理由</view><i class="iconfont iconright"></i>
		</view>
		<view class="change">
			<view class="changeTop-title">联系方式</view>
			<input type="text" v-model="phone" placeholder="请输入您的联系电话" />
		</view>
		<view class="change">
			<view class="changeTop-title">相关描述</view>
			<textarea v-model="describe" auto-height maxlength="200" placeholder="客观~请描述您遇到的问题（最多只能输入200个字）" @input="changeInput" />
			<view class="imgs">
				<view class="imgsCont" v-for="(item,index) in imgs" :key="index">
					<image :src="item"></image>
					<i class="iconfont iconcha" @tap="delImage(index)"></i>
				</view>
				<view class="uploadImg" @tap="chooseImage"><i class="iconfont iconpaizhao"></i></view>
			</view>
		</view>
		<view class="bottom"><view class="saveBtn">提交</view></view>
		<view class="dialog" v-if="isShow">
			<view class="dialogCont">
				<view class="dialogTitle">申请原因</view>
				<view class="dialogList">
					<scroll-view scroll-y="true" >
						<radio-group @change="radioChangeDialog">
							<label class="infoItem" v-for="(item,index) in array" :key="index">
								{{item}}<radio color="#E6B873" :value="item" />
							</label>
						</radio-group>
					</scroll-view>
				</view>
				<view class="bottom"><view class="saveBtn" @tap="isShow =! isShow">确认</view></view>
			</view>
		</view>
	</view>
</template>

<script>
	import CardMsg from "@/components/cardStyle/card-1.0.vue";
	export default {
		components: {
			CardMsg
		},
		data() {
			return {
				detail: {
					orderNo: '202103543956905775024420', //订单编号
					orderStatus: 3, //订单状态
					orderId: '001', //商品ID
					orderName: '五年高考三年模拟001', //商品名称
					orderImage: 'http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg', //商品图片
					discount: '1500.00', //优惠数额
					pay: '1566.00', //实付金额
					fare: '110.00', //运费
					price: '299.00', //商品价格
					orderTime: '2021-02-06 15:54', //下单时间
					creatTime: '2021-02-06 15:54', //创建时间
					payTime: '2021-02-06 15:54', //支付时间
					payType: '微信支付', //支付方式
					count: 1
				},
				radioList: [{
					name: '退款',
					value: '1'
				}, {
					name: '退货',
					value: '2'
				}, {
					name: '其他',
					value: '3'
				}],
				phone: '', //联系电话
				describe: '', //相关描述
				imgs: [],
				isShow: false,
				array:['卖家发错货了','大小/重量于商品描述不符','质量问题','大小/重量于商品描述不符','其他','卖家发错货了','大小/重量于商品描述不符','质量问题','大小/重量于商品描述不符','其他']
			}
		},
		methods: {
			// 选择售后类型
			radioChange: function(evt) {
				console.log(evt.target.value);
			},
			// 选择申请原因
			radioChangeDialog: function(evt) {
				console.log(evt.target.value);
			},
			// 改变相关描述内容
			changeInput(e) {
				if (e.detail.cursor >= 200) {
					this.util.showDialog('最多只能输入200个字');
				}
			},
			// 选择图片上传修改
			chooseImage: function() {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						_this.$api.apifile('user/currency.basic/UploadUserImg', { //上传图片
							file: res.tempFilePaths[0]
						}).then(res => {
							var result = JSON.parse(res.data);
							if (result.code == 200) {
								var image = result.data.visit_path;
								_this.imgs.push(image);
							} else {
								_this.util.showDialog('上传失败,请重新上传');
							}
						})
					}
				});
			},
			// 删除图片
			delImage(index) {
				this.imgs.splice(index,1);
			}
		}
	}
</script>

<style>
	page{
		padding-bottom: 200upx;
	}
	.change {
		padding: 0 30upx 20upx;
		width: calc(100% - 60upx);
		margin-top: 20upx;
		background: #FFFFFF;
	}

	.changeTop-title {
		color: #333333;
		font-style: 32upx;
		font-weight: bold;
		padding: 20upx 0;
	}

	.infoItem {
		height: 88upx;
		justify-content: space-between;
	}

	input,textarea {
		color: #999999;
		font-size: 24upx;
		padding: 30upx 20upx;
		width: calc(100% - 40upx);
		background: #F7F7F7;
		border-radius: 10upx;
	}
	.imgs{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 30upx;
	}
	.imgsCont{
		position: relative;
		margin: 0 24upx 20upx 0;
	}
	image{
		width: 110upx;
		height: 110upx;
		border: 2upx solid #CDCDCD;
	}
	.iconcha{
		color: #FF7171;
		position: absolute;
		right: -12upx;
		top: -16upx;
	}
	.uploadImg{
		width: 110upx;
		height: 110upx;
		line-height: 110upx;
		text-align: center;
		border: 2upx solid #CDCDCD;
		margin-bottom: 28upx;
	}
	.uploadImg .iconfont{
		color: #CDCDCD;
		font-size: 40upx;
	}
	.saveBtn{
		margin: 30upx;
	}
	.dialog{
		position: fixed;
		bottom: 0;
		left: 0;
		top: 0;
		right: 0;
		z-index: 99;
		background: rgba(0,0,0,.5);
	}
	.dialogCont{
		width: 100%;
		height: 680upx;
		background: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 10upx 10upx 0px 0px;
	}
	.dialogTitle{
		color: #333333;
		text-align: center;
		padding: 30upx 0;
		height: 40upx;
	}
	.dialogList{
		height: 460upx;
	}
	uni-scroll-view {
		height: 100%;
	}
</style>
